<template>
  <a-row :gutter="24">
    <a-col :md="5" :sm="24">
      <a-card :bordered="false" :loading="treeLoading" style="overflow: auto">
        <div v-if="this.proTree != ''" style="max-height: 750px">
          <!--          树形结构 -->
          <a-tree
            style="scroll: true"
            :treeData="proTree"
            v-if="proTree.length"
            @select="handleClick"
            :defaultExpandAll="false"
            :defaultExpandedKeys="defaultExpandedKeys"
            :replaceFields="replaceFields"
          />
        </div>
      </a-card>
    </a-col>
    <a-col :md="19" :sm="24">
      <a-card :bordered="false" :bodyStyle="tstyle">
        <div class="table-page-search-wrapper" v-if="hasPerm('pro:page')">
          <!--          搜索表单-->
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="产品编码">
                  <a-input v-model.trim="queryParam.code" allow-clear placeholder="请输入产品编码" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="产品名称">
                  <a-input v-model.trim="queryParam.name" allow-clear placeholder="请输入产品名称" />
                </a-form-item>
              </a-col>
              <template v-if="advanced">
                <a-col :md="8" :sm="24">
                  <a-form-item label="备注">
                    <a-input v-model.trim="queryParam.remarks" allow-clear placeholder="请输入备注" />
                  </a-form-item>
                </a-col>
                <!--                自定义配置字段-->
                <json-query
                  ref="jsonQuery"
                  :fieldProp="fieldProp"
                />
              </template>
              <!--              通过展开或收起来控制自定义字段的传参与否-->
              <a-col :md="8" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button
                    type="primary"
                    @click="
                      () => {
                        if (advanced) {
                          $refs.jsonQuery.getSearchForm().submit((values) => {
                            this.queryParam.josn = values
                            $refs.table.refresh(true)
                          })
                        } else {
                          $refs.table.refresh(true)
                        }
                      }
                    "
                  >查询</a-button
                  >
                  <a-button
                    style="margin-left: 8px"
                    @click="
                      () => {
                        this.queryParam = {}
                        if (advanced) {
                          $refs.jsonQuery.getSearchForm().reset()
                        }
                        $refs.table.refresh(true)
                      }
                    "
                  >重置</a-button
                  >
                  <a @click="toggleAdvanced" style="margin-left: 8px">
                    {{ advanced ? '收起' : '展开' }}
                    <a-icon :type="advanced ? 'up' : 'down'" />
                  </a>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>
      <a-card :bordered="false">
        <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          :alert="options.alert"
          :rowKey="(record) => record.id"
          :rowSelection="options.rowSelection"
          :components="this.comp"
          :scroll="{x:1200}"
          bordered
        >
          <!--          表格上方的三个按钮-->
          <template class="table-operator" slot="operator" v-if="hasPerm('pro:add')">
            <a-button type="primary" v-if="hasPerm('pro:add')" icon="plus" @click="$refs.addForm.add()">新增 </a-button>
            <a-button
              type="danger"
              :disabled="selectedRowKeys.length < 1"
              v-if="hasPerm('pro:delete')"
              @click="batchDelete"
            >
              <a-icon type="delete" />
              批量删除
            </a-button>
            <x-down v-if="hasPerm('pro:export')" ref="batchExport" @batchExport="batchExport" />
          </template>
          <span slot="logo" slot-scope="logo">
            <a-tag v-if="logo == null || logo === ''">暂无图片</a-tag>
            <img v-else style="width: 80px; height: 80px" alt="" :src="getUrl(logo)">
          </span>
          <!--          作用域插槽用于实现数据的显示-->
          <span slot="unitScopedSlots" slot-scope="text">
            <a-tag v-if="text == null"></a-tag>
            <a-tag v-else color="green">{{ 'unit' | dictType(text) }}</a-tag>
          </span>
          <span slot="proTypeIdScopedSlots" slot-scope="text">
            <!-- {{ '${column.dictTypeCode}' | dictType(text) }} -->
            {{ 'common_status' | dictType(text) }}
          </span>
          <!--          操作栏里的按钮，先检查有无权限，有则显示，无则不显示-->
          <span slot="action" slot-scope="text, record">
            <a v-if="hasPerm('proType:detail')" @click="$refs.detail.detail(record)">查看</a>
            <a-divider type="vertical" v-if="hasPerm('proType:edit') & hasPerm('proType:detail')" />
            <a v-if="hasPerm('pro:edit')" @click="$refs.editForm.edit(record)">编辑</a>
            <a-divider type="vertical" v-if="hasPerm('pro:edit') & hasPerm('pro:delete')" />
            <!--            删除的提示栏-->
            <a-popconfirm
              v-if="hasPerm('pro:delete')"
              placement="topRight"
              title="确认删除？"
              @confirm="() => singleDelete(record)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
        </s-table>
        <!--        添加dialog，引入的addForm.vue-->
        <add-form ref="addForm" @ok="handleOk" :selProTypeId="selProTypeId" />
        <!--        删除dialog，引入的editForm.vue-->
        <edit-form ref="editForm" @ok="handleOk" />
        <!--        查看dialog，引入的detail.vue-->
        <detail ref="detail" @ok="handleOk" />
        <!--        型号侧边dialog，引入的promodel下的tableDrawer-->
        <!--        <pro-model-table-drawer ref="proModelTableDrawer"/>-->
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import { STable, XDown } from '@/components'
import { proDelete, proExport, proPage } from '@/api/modular/main/pro/proManage'
import addForm from './addForm.vue'
import editForm from './editForm.vue'
import detail from './detail.vue'
import { getProTree } from '@/api/modular/main/protype/proTypeManage'
import dragMixin from '@/mixins/drag/index'
import '@/mixins/drag/drag.css'
import JsonQuery from '@/components/MyComp/JsonQuery'
import { fieldConfigList } from '@/api/modular/main/fieldconfig/fieldConfigManage'

export default {
  name: 'ProTable',
  components: {
    STable,
    addForm,
    editForm,
    detail,
    XDown,
    JsonQuery
  },
  // 表格拖拽
  mixins: [dragMixin],
  data() {
    return {
      unit: [],
      fieldProp: {},
      // 点击的树节点
      selProTypeId: undefined,
      proTypeIdData: [],
      treeLoading: true,
      proTypeTree: [],
      // 默认展开的
      defaultExpandedKeys: [],
      // 替换字段
      replaceFields: {
        key: 'id'
      },
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '产品编码',
          align: 'center',
          dataIndex: 'code',
          width: 140,
          ellipsis: true
        },
        {
          title: '产品名称',
          align: 'center',
          dataIndex: 'name',
          width: 140,
          ellipsis: true
        },
        {
          title: '产品类型',
          align: 'center',
          dataIndex: 'proTypeName',
          width: 140,
          ellipsis: true
        },
        {
          title: '工艺路线',
          align: 'center',
          dataIndex: 'workRouteName',
          width: 140,
          ellipsis: true
        },
        {
          title: '图片',
          align: 'center',
          dataIndex: 'image',
          width: 140,
          scopedSlots: { customRender: 'logo' }
        },
        {
          title: '库存单位',
          align: 'center',
          dataIndex: 'unit',
          scopedSlots: { customRender: 'unitScopedSlots' },
          width: 140,
          ellipsis: true
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remarks',
          width: 140,
          ellipsis: true
        }
      ],
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return proPage(Object.assign(parameter, this.queryParam)).then((res) => {
            // TODO: 遍历res.data，将动态字段转为JSON格式并将其每一个key作为新的属性追加到res.data的每一个对象上
            res.data.rows.forEach((item) => {
              // TODO: 追加属性
              Object.assign(item, JSON.parse(item.josn))
            })
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      proTree: [],
      options: {
        alert: {
          show: true,
          clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      previewById: '/api/sysFileInfo/preview?id='
    }
  },
  created() {
    this.unit = this.$options.filters['dictData']('unit')
    // 获取树
    this.getProTree()
    // 判断有无编辑和删除的权限，若有，则显示操作栏；若无，则不显示操作栏
    if (this.hasPerm('pro:edit') || this.hasPerm('pro:delete')) {
      this.columns.push({
        title: '操作',
        width: 340,
        align: 'center',
        // dataIndex: 'action',
        fixed: 'right',
        scopedSlots: { customRender: 'action' }
      })
    }
    // 自定义字段的显示，有权限则显示，无则不显示
    if (this.hasPerm('fieldConfig:list')) {
      fieldConfigList({ tableName: 'dw_pro' }).then((res) => {
        res.data.forEach((item) => {
          // 查询自定义字段
          this.fieldProp[item.fieldIndex] = {
            type: item.fieldType,
            title: item.fieldTitle,
            'x-decorator': 'FormItem',
            // 'x-component': 'a-input',
            'x-decorator-props': {
              labelCol: 6,
              // labelWrap: true,
              wrapperCol: 18
            },
            'x-component-props': {
              placeholder: '请输入',
              style: {
                width: '100%'
              }
            }
          }
          // 表格自定义字段
          this.columns.splice(2, 0, {
            title: item.fieldTitle,
            align: 'center',
            dataIndex: item.fieldIndex,
            width: 100,
            ellipsis: true
          })
        })
      })
    }
  },
  methods: {
    /**
     * 获取到类型树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
     */
    getProTree() {
      getProTree(Object.assign(this.queryParam)).then((res) => {
        this.treeLoading = false
        if (!res.success) {
          return
        }
        this.proTree = res.data
        for (const item of res.data) {
          // eslint-disable-next-line eqeqeq
          if (item.parentId == 0) {
            this.defaultExpandedKeys.push(item.id)
          }
        }
      })
    },
    /**
     * 点击左侧机构树查询列表
     */
    handleClick(e) {
      this.selProTypeId = e.toString()
      this.queryParam = {
        ProTypeId: e.toString()
      }
      this.$refs.table.refresh(true)
    },
    /**
     * 单个删除
     */
    singleDelete(record) {
      const param = [{ id: record.id }]
      this.proDelete(param)
    },
    /**
     * 批量删除
     */
    batchDelete() {
      const paramIds = this.selectedRowKeys.map((d) => {
        return { id: d }
      })
      this.proDelete(paramIds)
    },
    proDelete(record) {
      proDelete(record).then((res) => {
        if (res.success) {
          this.$message.success('删除成功')
          this.$refs.table.clearRefreshSelected()
        } else {
          this.$message.error(res.message) // + res.message
        }
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    /**
     * 批量导出
     */
    batchExport() {
      const paramIds = this.selectedRowKeys.map((d) => {
        return { id: d }
      })
      proExport(paramIds).then((res) => {
        this.$refs.batchExport.downloadfile(res)
      })
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // 获取选中的数据供父组件调用
    getSelectedRows() {
      return this.selectedRows
    },
    getUrl(logo) {
      const imageIds = logo
      let urlId = ''
      imageIds.split(';').forEach((id) => {
        if (urlId === '') {
          urlId = id
        }
      })
      return this.previewById + urlId
    }

  }
}
</script>
<style lang = "less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}

/*滚动条样式*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/*定义滑块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #a9a9a9;
}

/*滑动轨道*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #f5f5f5;
}
</style>
